import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import {Map, View} from "ol";
import TileImage from "ol/source/TileImage";
import XYZ from "ol/source/XYZ";
import TileGrid from "ol/src/tilegrid/TileGrid.js";

const projection="EPSG:4326";
const center=[114.236262, 22.677236];
const zoom=10;

export const changeSource=(element,map,mapSource)=>{
  let layers=null;
  let view=null;
  switch (mapSource) {
    case 'OSM': // OSM 地图
      layers = [
        new TileLayer({source: new OSM(),})
      ];
      view = commView();
      break;
    case 'Baidu': // 百度地图
      // 百度地图
      let resolutions = [];
      const maxZoom = 18;
      // 计算百度使用的分辨率
      for(let i=0; i<=maxZoom; i++){
        resolutions[i] = Math.pow(2, maxZoom-i);
      }
      const tilegrid  = new TileGrid({
        origin: center,    // 设置原点坐标
        resolutions: resolutions    // 设置分辨率
      });
      // 创建百度地图的数据源
      const baiduSource = new TileImage({
        projection: 'EPSG:3857',
        //projection: 'BD:09',
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
          if (!tileCoord){
            return '';
          }
          let z = tileCoord[0];
          let x = tileCoord[1];
          /** openlayers6 版本这里要这样改才能解决
           *https://www.giserdqy.com/secdev/openlayers/36281/
           **/
          //let y = tileCoord[2];
          let y = -tileCoord[2]-1;
          // 百度瓦片服务url将负数使用M前缀来标识
          if(x<0){
            x = 'M' + (-x);
          }
          if(y<0){
            y = 'M' + (-y);
          }
          return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
        }
      });
      // 百度地图层
      layers = [
        new TileLayer({
          source: baiduSource,
        })];
      view = new View({
        zoom: zoom,
        projection: 'EPSG:4326',
        center : center,
      })
      break;
    case 'GaoDeYX': // 高德影像
      layers = [
        //commLayer('http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}')
        commLayer('http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6'),
        commLayer('http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8')
      ]
      view = commView();
      break;
    case 'GaoDeJD': // 高德街道
      layers = [
        //commLayer('http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
        commLayer('http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}')
      ]
      view = commView();
      break;
    case 'GaoDeSl': //高德矢量
      layers = [
        commLayer('http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7')
      ]
      view = commView();
      break;
    case 'GoogleYX':  //谷歌影像
      layers = [
        commLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}')
      ]
      view = commView();
      break;
    case 'GoogleJD'://谷歌街道
      layers = [
        commLayer('http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}')
      ]
      view = commView();
      break;
    case 'ArcgisYX': //Arcgis影像
      layers = [
        commLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'ArcgisJD': //Arcgis街道
      layers = [
        commLayer('http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'TianDiWX': //天地图卫星
      layers = [
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f'),
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f')
      ]
      view = commView();
      break;
    case 'TianDiJD'://天地图街道
      layers = [
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f'),
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f')
      ]
      view = commView();
      break;
    case 'TianDiDX':
      layers = [
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f'),
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f')
      ]
      view = commView();
      break;
    case 'GEOQvec':
      layers = [
        commLayer('http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQgray':
      layers = [
        commLayer('http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQblue':
      layers = [
        commLayer('http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQwarm':
      layers = [
        commLayer('http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQline':
      layers = [
        commLayer('http://cache1.arcgisonline.cn/arcgis/rest/services/SimpleFeature/ChinaBoundaryLine/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQchina':
      layers = [
        commLayer('http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/administrative_division_boundaryandlabel/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQHydro':
      layers = [
        commLayer('http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    case 'GEOQgreen':
      layers = [
        commLayer('http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/vegetation/MapServer/tile/{z}/{y}/{x}')
      ]
      view = commView();
      break;
    default:
      layers = [
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f'),
        commLayer('http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7786923a385369346d56b966bb6ad62f')
      ]
      view = commView();
      break;
  }
  console.log("element:%o,map:%o,mapSource:%o",element,map,mapSource);
  console.log("layers:%o,view:%o",layers,view);
  if (!!layers && !!view){
    if (!map){
        map = new Map({
        target: element, // 指向对象
        layers: layers,
        loadTilesWhileAnimating: true,//支持动画
        view: view,
      });
    }else{
      //移除老的layers
      const lastLayers = map.getLayerGroup().getLayers().getArray();
      for(let i=lastLayers.length-1;i>=0;i--){
        map.removeLayer(lastLayers[i]);
      }
      map.setLayers(layers);
      map.setView(view);
    }
  }

}

const commLayer=(url)=>{
  let gdsource = new XYZ({
    url: url
  })
  return new TileLayer({
    source: gdsource,
  })
}

const commView=()=>{
  return new View({
    projection: projection,
    center: center,
    zoom: zoom,
  });
}
